<style lang="scss">
@keyframes danmakuIn {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
p {
  margin: 0px;
  padding: 0px;
}

.hide {
  display: none !important;
}
.danmaku {
  &-item {
    width: 700px;
    min-height: 80px;
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 33px;
    display: flex;
    box-sizing: border-box;
    padding-left: 110px;
    padding-bottom: 10px;
    padding-right: 10px;
    transition: opacity 0.5s;
    user-select: none;
    animation: 0.5s danmakuIn;
    opacity: 1;
    &.hidden {
      opacity: 0;
    }

    &.gift {
      box-shadow: 0px 0px 10px rgba(247, 159, 62, 0.3);
    }

    &.sc {
      box-shadow: 0px 0px 10px rgba(255, 53, 53, 0.3);
    }

    &.sj {
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      height: 150px;
      padding-left: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
    }
  }

  &-label {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 7px;
    height: 100%;
    background: #699bf7;
    box-shadow: 0px 0px 4px #699bf7;

    &.oa {
      background: #f79f3e;
      box-shadow: 0px 0px 4px #f79f3e;
    }
  }

  &-item.gift &-label {
    background: #f79f3e;
    box-shadow: 0px 0px 4px #f79f3e;
  }

  &-item.sc &-label {
    background: #ff3535;
    box-shadow: 0px 0px 4px #ff3535;
  }

  &-label2 {
    position: absolute;
    bottom: -7px;
    left: 25px;
    color: rgba(247, 159, 62, 0.2);
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 1px;
  }

  &-item.sc &-label2 {
    color: rgba(255, 53, 53, 0.15);
  }

  &-price {
    position: absolute;
    top: 0px;
    right: 0px;
    border-left: 2px dashed rgba(247, 159, 62, 0.5);
    width: 110px;
    height: 100%;
    margin-left: auto;
    color: #f79f3e;

    .text {
      position: absolute;
      font-size: 15px;
      line-height: 15px;
      font-weight: bold;
      right: 5px;
      bottom: 5px;
      white-space: nowrap;
    }

    .price {
      position: absolute;
      font-size: 30px;
      font-weight: bold;
      right: 5px;
      bottom: 20px;
    }
  }

  &-item.sc &-price {
    border-left: 2px dashed rgba(255, 53, 53, 0.5);
    color: #ff3535;
  }

  &-author-face {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    top: -15px;
    left: 25px;
    background-size: cover;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
  }
  &-content {
    width: 100%;
    overflow: initial;
    align-self: center;
    position: relative;
    z-index: 99;
  }
  &-item.gift &-content,
  &-item.sc &-content {
    width: calc(100% - 110px);
  }
  &-author-name {
    color: #000;
    margin-bottom: 6px;
    // 主播
    &.anchor {
      color: #fff248;
    }
    // 房管
    &.owner {
      color: #ff9800;
    }
  }
  &-message,
  &-gift-num {
    color: #fff;
  }
  &-gift-name {
    color: #eb76ff;
  }
  &-message {
    color: #000;
    font-family: 'Microsoft YaHei';
    font-size: 24px;
    line-height: 24px;
  }
  &-gift-num {
    font-family: 'Microsoft YaHei';
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
  }
  &-author-name,
  &-gift-name {
    font-family: 'Microsoft YaHei';
    font-size: 20px;
    line-height: 20px;
  }

  &-item.sj {
    .l {
      background-color: #fff;
      width: 35px;
      height: 100%;
    }

    .l .txt {
      font-family: 'Source Han Serif CN';
      transform: rotate(90deg);
      font-size: 30px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .r {
      position: relative;
      width: calc(100% - 35px);
      box-sizing: border-box;
      padding-left: 10px;
      height: 100%;
      color: #fff;

      .p1 {
        font-size: 12px;
      }

      .p2,
      .p3,
      .p4 {
        font-size: 30px;
      }
    }

    .svg {
      top: 8px;
      right: 86px;
      position: absolute;
      z-index: 2;
    }

    .avatar-box {
      width: 108px;
      height: 108px;
      position: absolute;
      right: 21px;
      top: 21px;
      border: 2px solid #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;

      .avatar {
        width: 94px;
        height: 94px;
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.15));
        border-radius: 5px;
      }
    }

    .sj-svg {
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
}
</style>

<template>
  <div class="danmaku-item" :class="{ hidden: isHidden, gift: type === 'gift', sc: type === 'sc', sj: type === 'sj' }">
    <template v-if="type !== 'sj'">
      <div class="danmaku-label" :class="{ oa: isAnchor || isOwner }"></div>
      <div class="danmaku-label2" v-if="type === 'gift' || type === 'sc'">{{ giftText }}</div>

      <div v-if="showFace" class="danmaku-author-face" :style="{ backgroundImage: face ? `url(${face})` : '' }"></div>
      <div v-if="type === 'message'" class="danmaku-content">
        <p class="danmaku-author-name with-colon" :class="{ anchor: isAnchor, owner: isOwner }">
          {{ uname }}{{ isAnchor ? '(主播)' : '' }}{{ isOwner ? '(房管)' : '' }}
        </p>
        <p class="danmaku-message">{{ message }}</p>
      </div>
      <div v-else-if="type === 'gift'" class="danmaku-content">
        <p class="danmaku-author-name with-colon" :class="{ anchor: isAnchor, owner: isOwner }">
          {{ uname }}{{ isAnchor ? '(主播)' : '' }}{{ isOwner ? '(房管)' : '' }}
        </p>
        <p class="danmaku-message">赠送了{{ giftName }}&nbsp;×&nbsp;{{ num }}</p>
      </div>
      <div v-else-if="type === 'sc'" class="danmaku-content">
        <p class="danmaku-author-name with-colon" :class="{ anchor: isAnchor, owner: isOwner }">
          {{ uname }}{{ isAnchor ? '(主播)' : '' }}{{ isOwner ? '(房管)' : '' }}
        </p>
        <p class="danmaku-message">{{ message }}</p>
      </div>
      <div v-else-if="type === 'info'" class="danmaku-content">
        <span class="danmaku-message">{{ message }}</span>
      </div>
      <div class="danmaku-price" v-if="(type === 'gift' && price > 0) || type === 'sc'">
        <div class="price">￥{{ priceText }}</div>
        <div class="text">{{ giftText }}</div>
      </div>
    </template>
    <template v-if="type === 'sj'">
      <div class="l">
        <div class="txt" :style="{ color: sjObj.newc }">NEW+</div>
      </div>
      <div class="r" :style="{ backgroundColor: sjObj.bgc }">
        <p class="p1">NAME:</p>
        <p class="p2">{{ uname }}</p>
        <p class="p3">{{ sjObj.p3 }}</p>
        <p class="p4">{{ sjObj.p4 }}</p>
      </div>
      <svg class="svg" width="112" height="124" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="sjObj.svg"></svg>
      <div class="avatar-box">
        <img :src="face" alt="" class="avatar" />
      </div>
      <svg class="sj-svg" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 0V16H0L16 0Z" fill="white" />
      </svg>
    </template>
  </div>
</template>

<script>
import { toRefs, ref, computed, onBeforeUnmount } from 'vue';

export default {
  props: {
    type: {
      type: String,
      default: 'message',
    },
    showFace: Boolean,
    face: String,
    uid: Number,
    uname: String,
    message: String,
    isAnchor: Boolean,
    isOwner: Boolean,
    action: String,
    giftName: String,
    num: Number,
    price: Number,
    stay: Number,
    hidden: Boolean,
  },
  computed: {
    priceText() {
      if (this.price > 0) {
        return (this.price / 1000).toString();
      } else {
        return this.price.toString();
      }
    },
    giftText() {
      let dict = {
        gift: 'GIFT',
        sc: 'SUPER CHAT',
      };
      return dict[this.type];
    },
    sjObj() {
      return {
        newc: '#000',
        p3: '舰长成功任职',
        p4: 'CAPTAIN ON THE BRIDGE',
        bgc: '#4D647B',
        svg: '<path opacity="0.5" d="M56 0C51.0493 0 46.3013 1.95964 42.8007 5.44781C39.3 8.93599 37.3333 13.667 37.3333 18.6C37.3313 22.448 38.5271 26.202 40.7559 29.3445C42.9847 32.487 46.1368 34.8633 49.7778 36.146V43.4H31.1111V55.8H49.7778V111.104C45.1733 110.298 40.4444 108.996 36.0267 107.074C31.4222 105.09 27.3778 102.672 23.7689 99.758C20.16 96.844 17.2978 93.682 15.1822 90.21L24.8889 80.6L0 62V80.6C0 86.614 1.68 92.256 5.10222 97.464C8.69808 102.892 13.3022 107.585 18.6667 111.29C24.08 115.258 30.1156 118.358 36.5867 120.59C43.12 122.822 49.5911 124 56 124C62.4089 124 68.88 122.76 75.4133 120.528C81.8844 118.296 87.92 115.196 93.3333 111.29C99.0578 107.322 103.476 102.734 106.898 97.464C110.32 92.256 112 86.614 112 80.6V62L87.1111 80.6L96.8178 90.21C94.7022 93.682 91.84 96.844 88.2311 99.758C84.6222 102.672 80.5778 105.09 75.9733 107.074C71.5556 108.996 66.8267 110.298 62.2222 111.104V55.8H80.8889V43.4H62.2222V36.084C65.8532 34.8049 68.9982 32.438 71.2262 29.3078C73.4541 26.1776 74.6558 22.4375 74.6667 18.6C74.6667 13.667 72.7 8.93599 69.1993 5.44781C65.6987 1.95964 60.9507 0 56 0ZM56 12.4C57.6502 12.4 59.2329 13.0532 60.3998 14.2159C61.5667 15.3787 62.2222 16.9557 62.2222 18.6C62.2222 20.2443 61.5667 21.8213 60.3998 22.9841C59.2329 24.1468 57.6502 24.8 56 24.8C54.3498 24.8 52.7671 24.1468 51.6002 22.9841C50.4333 21.8213 49.7778 20.2443 49.7778 18.6C49.7778 16.9557 50.4333 15.3787 51.6002 14.2159C52.7671 13.0532 54.3498 12.4 56 12.4Z" fill="white"/>',
      };
    },
  },
  setup(props) {
    const hidden = ref(false);
    const needRemoved = ref(false);
    if (props.stay) {
      const stayTimeout = setTimeout(() => {
        hidden.value = true;
        if (props.type === 'info') {
          setTimeout(() => (needRemoved.value = true), 800);
        }
      }, props.stay);
      onBeforeUnmount(() => clearTimeout(stayTimeout));
    }
    const isHidden = computed(() => props.hidden || hidden.value);
    return { ...toRefs(props), isHidden, needRemoved };
  },
};
</script>
